<style lang='scss' scoped>
	.cate {
		.title {
			border-top: 1rpx solid mediumvioletred;
			border-bottom: 1rpx solid mediumvioletred;
			padding: 20rpx 0 20rpx 10rpx;
			color: darkred;
		}

		.header {
			height: calc(100vh - 260rpx);
			overflow: auto;

			.list {
				display: flex;
				box-sizing: border-box;
				/* padding: 20rpx; */
				align-items: center;
				/* justify-content: space-between; */

				.label {
					/* flex: 50rpx; */
					width: 100rpx;
				}

				.image {
					/* flex: 100rpx; */
					/* padding: 0 10px; */
					width: 150rpx;

					image {
						width: 100%;
					}
				}

				.warp {
					flex: 1;
					padding: 20rpx;

					.titile {
						font-size: 30rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
					}

					.button {
						display: flex;
						justify-content: space-between;

						.price {
							color: orangered;
						}

						.arrow {
							display: flex;
							align-items: center;

						}
					}
				}


			}
		}

		.kong {
			image {
				width: 100%;
			}
		}

		.footer {
			width: 100vw;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;

			view {
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
			}

			:nth-child(3) {
				background-color: #FF5A5F;
			}
		}

		.userlist {
			padding: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
<template>
	<view class='cate'>
		<button @click="getuserlist" v-if="userlist.userName !=='张三'">添加收获地址</button>
		<view class="userlist" v-else>
			<view class="top">
				<text>{{userlist.userName}}</text>
				<text>{{userlist.telNumber}}</text>
			</view>
			<view>
				{{userlist.provinceName}}
				{{userlist.cityName}}
				{{userlist.countyName}}
				{{userlist.detailInfo}}
			</view>
		</view>
		<view class="title">
			购物车
		</view>
		<view class="kong" v-if="shoplist.length == 0">
			<image
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fc6ac03e15f4b5efc7e2a268970ce660baab1ba21.jpg_320x200.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663241098&t=7025eb03c453abb6dd9a6f7d5944feed"
				mode="widthFix"></image>
		</view>
		<view class="header" v-else>
			<view class="list" v-for="(item,index)  in shoplist" :key="index">
				<view class="label">
					<label>
						<checkbox :checked="item.flag" @click="checkeda(index)" />
					</label>
				</view>
				<view class="image">
					<image :src="item.img || '../../static/52b1464290643af26775f95b539de4c0.jpeg'" mode="widthFix">
					</image>
				</view>
				<view class="warp">
					<div class="titile">{{item.goods_name}}</div>

					<view class="button">
						<text class="price">¥{{item.goods_price}}</text>
						<view class="arrow">
							<button type="default" @click="jian(index)">-</button>
							<text>{{item.num}}</text>
							<button @click="jia(index)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view>
				<label>
					<checkbox v-model="checked" :checked="checked" @click="checkedAll" /><text>全选</text>
				</label>
			</view>
			<view>
				合计：￥{{totaPrice}}
			</view>
			<view @click="yes">
				结算：({{totalNum}})
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoplist: [],
				num: 1,
				totaPrice: 0,
				totalNum: 0,
				checked: false,
				userlist: {}
			}
		},
		onLoad() {},
		onShow() {
			this.shoplist = uni.getStorageSync('list') || []
		},
		methods: {
			async getuserlist() {
				const response = await uni.chooseAddress()
				console.log(response[1]);
				this.userlist = response[1]
			},
			jian(index) {
				this.shoplist[index].num == 1 ? 1 : this.shoplist[index].num--
				this.jisuan()
			},
			jia(index) {
				this.shoplist[index].num++
				this.jisuan()
			},
			checkedAll() {
				this.checked = !this.checked
				this.shoplist.forEach(v => {
					v.flag = this.checked
				})
				this.jisuan()
			},
			checkeda(index) {
				this.shoplist[index].flag = !this.shoplist[index].flag
				this.checked = this.shoplist.every(v => v.flag)
				this.jisuan()
			},
			//数量
			jisuan() {
				let num = 0
				let price = 0
				this.shoplist.forEach(v => {
					if (v.flag) {
						num += v.num
						price += v.num * v.goods_price
					}
				})
				this.totalNum = num
				this.totaPrice = price
			},
			yes() {
				if (this.totalNum == 0) {
					uni.showToast({
						title: '没选商品结你妈的算啊？',
						icon: "none",
						mask: true
					})
					return
				}
				let zhifulist = []
				this.shoplist.forEach(v => {
					if (v.flag) {
						zhifulist.push(v)
					}
				})
				uni.setStorageSync('zhifulist', zhifulist)
				uni.navigateTo({
					url: "/pages/zhifu/zhifu"
				})
				this.totaPrice = 0,
					this.totalNum = 0,
					this.checked = false
				this.shoplist = this.shoplist.filter(v => v.flag == false)
				uni.setStorageSync('list', this.shoplist)
			}
		},
	}
</script>
